<!--数据查询列表组件  -->
<template>
  <div :span="20" style="padding: 0px 15px;" class="MessagePanel">
    <div class="topButton">
      <div class="name">
        <p class="classNme">项目管理</p>
        <p class="smallClassName">PROJECT MANAGEMENT</P>
      </div>
    </div>
    <div class="line"></div>
    <!-- 两个el-tabs用来切换历史数据和实时数据下的各个数据项  -->
    <div class="data-record-view-container">
      <div style="display: flex; ">
        <el-tabs tab-position="left" @tab-click="checkTabs" v-model="deviceType" class="dataTables">
          <el-tab-pane label="水表" name="1"/>
          <el-tab-pane label="电表" name="2"/>
          <el-tab-pane label="冷却塔" name="3"/>
          <el-tab-pane label="热量表" name="4"/>
          <el-tab-pane label="流量计" name="5"/>
          <el-tab-pane label="冷热表" name="6"/>
          <el-tab-pane label="阀门" name="7"/>
          <el-tab-pane label="水泵" name="8"/>
          <el-tab-pane label="温控仪" name="9"/>
          <el-tab-pane label="VAV温控仪" name="10"/>
          <el-tab-pane label="时间采样仪" name="11"/>
          <el-tab-pane label="制冷主机" name="12"/>
        </el-tabs>
        <div style="width: 100%;padding: 0px 20px;">
          <div class="buttom" style="text-align: end;">

            <el-button class="Btn" size="small" type="topSubButtom" @click="bindDevice()">
              <svg-icon icon-class="bd" class="buttonSvg"/>
              设备绑定
            </el-button>
          </div>
          <el-table
              :data="tableData.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)"
              class="communityTable"
              empty-text="暂无数据"
              :default-sort="{ prop: 'date', order: 'descending' }"
              row-key="deviceId"
              style="width: 100%;height: 470px;"
              @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="rangeName" label="所属区域" align="center"/>
            <el-table-column prop="deviceNo" label="设备编号" align="center"/>
            <el-table-column prop="deviceName" label="设备名称" align="center"/>
            <el-table-column prop="deviceType" label="设备类型" align="center">
              <template #default="scope">
                {{ deviceTypeObj[scope.row.deviceType.toString()] }}
              </template>
            </el-table-column>
            <el-table-column prop="enable" label="启用状态" align="center">
              <template #default="scope">
                <el-switch
                    v-model="scope.row.enable"
                    style="--el-switch-on-color: #13ce66;"
                    disabled
                    active-value=1
                    inactive-value=2
                />
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
                small
                background
                layout="prev, pager, next"
                :current-page="data.currentPage"
                :page-size="data.pageSize"
                :total="tableData.length"
                @current-change="currentChange"
                style="float: left;"/>
            <div class="pageData">
              <span class="tableDataLengh">共 {{ tableData.length }} 条</span>
              <span>每页 {{ data.pageSize }} 条</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <BindProjectDeviceDialog ref="BindProjectDeviceDialog"/>
  </div>
</template>

<script>
let component;
/* 引入所有的数据项组件  */
import {nextTick} from 'vue';
import BindProjectDeviceDialog from "@/views/system/components/BindProjectDeviceDialog";
//TODO 当前只添加了历史数据项组件 还需添加实时数据项组件

export default {
  name: 'ProjectDeviceTableView',
  data() {
    return {
      deviceType: "1",
      dynamicComponent: null,//需要动态加载的数据项名字段
      selected: [],
      data: {
        pageNum: 1,
        pageSize: 7,
        currentPage: 1
      },
      tableData: [],
      deviceTypeObj: {
        "1": "水表",
        "2": "电表",
        "3": "冷却塔",
        "4": "热量表",
        "5": "流量计",
        "6": "冷热表",
        "7": "阀门",
        "8": "水泵",
        "9": "温控仪",
        "10": "VAV温控仪",
        "11": "时间采样仪",
        "12": "制冷主机",
      },
    }
  },
  components: {BindProjectDeviceDialog},

  methods: {
    handleSelectionChange(val) {
      component.selected = val;
    },
    async checkTabs(tab, event) {//两个tabs的触发事件
      await nextTick();//等待DOM刷新完成 否则的话dataViewName 无法及时更新bigLabel和smallLabel
      component.queryData();
    },
    setSelProject(projectId) {
      component.projectId = projectId;
      component.queryData();
    },
    async queryData() {
      let queryObj = {
        actionType: "projectDeviceQuery",
        projectId: component.projectId,
        deviceType: component.deviceType
      }
      let response = await component.$asyncPost("project", queryObj);
      if (response.success) {
        component.tableData = response.deviceList;
      }
    },
    bindDevice(){
      component.$refs.BindProjectDeviceDialog.showDialog({deviceType:component.deviceType,projectId:component.projectId});
    },
    currentChange(val) {
      component.data.pageNum = val;
      component.data.currentPage = val;
    },
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>

</style>